<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"></meta>
<title>列表-手机版</title>
<span th:replace="common-easyui-mobile::easyui_mobile_js_css"></span>

<style type="text/css">

.t-span{
text-align:right;
}


.pos-span{
color:red;
text-align:right;

}


.nag-span{
color:green;
text-align:right;

}

</style>


</head>
<body>

<table id="dgTable">
	</table>
	<div id="tb">
		<div class="m-toolbar">
			<div class="m-title">
				
			</div>
			 <div class="m-left">
                    <a th:href="@{/index}" class="easyui-linkbutton m-back" plain="true" outline="true">首页</a>
                </div>
                
              <div class="m-right">
                    <a th:href="@{/add}" class="easyui-linkbutton" iconCls="icon-add" plain="true" outline="true">添加</a>
                </div>   
		</div>
	</div>
	
	
	<div id="showWin" class="easyui-window" title="5日线" data-options="collapsible:false,maximizable:false,minimizable:false,resizable:true,closed:true,modal:true" style="width:400px;height:185px;padding:10px;">
	  <table style="width:100%;">
	  		<tr >
	  			<th style="width:30%">昨收：</th>
				<td ><span id="yesterdayPrice" ></span></td>	  
				<th style="width:30%">今开：</th>
				<td ><span id="startPrice" ></span></td>	  
	  		</tr>
	  		<tr>
	  			<th style="width:30%">最低：</th>
				<td ><span id="miniPrice" ></span></td>
				<th style="width:30%">最高：</th>
				<td ><span id="maxiPrice" ></span></td>	  	  	  		
	  		</tr>
	  		
	  		<tr>
	  			<th>5日线：</th>
				<td ><span id="currentFiveDayPrice"></span></td>	
	  			<th>明天5日线：</th>
				<td ><span id="tomorrowFiveDayPrice"></span></td>	  		
	  		</tr>
	  		<tr style="text-align: center">
	  			<td colspan="4"><a href="javascript:void(0)" data-options="iconCls:'icon-cancel'" id="resetBtn" class="easyui-linkbutton" onclick="closeWin()">关闭</a></td>
	  		</tr>
	  </table>
	</div>
	
	
	
	
	<script th:inline="javascript">
	//<![CDATA[
	//查看5日线
	function showFiveLineWin(id){
		var rowIndex=getSelectRowIndex(id);
	    //获取操作列
	    var record=$('#dgTable').datagrid('getData').rows[rowIndex];
	    
	   
	    
	    $.ajax({
	        type: "POST",
	        url:ctx+'/stock/getStockInfoById',
	        data: {
	        	id:id
	        },
	        success: function (data) {
	        	
	         $('#showWin').panel({
	     			title : data.name
	     		});
	     	    
	     	    $('#showWin').window('open');
	        	
	        	  $('#miniPrice').html(data.miniPrice);
	        	  $('#maxiPrice').html(data.maxiPrice);
	        	  
	        	  $('#yesterdayPrice').html(data.yesterdayPrice);
	        	  $('#startPrice').html(data.startPrice);
	        	
	        	  $('#currentPrice').html(data.currentPrice);
	        	  $('#currentFiveDayPrice').html(data.currentFiveDayPrice);
	        	  $('#tomorrowFiveDayPrice').html(data.tomorrowFiveDayPrice);
	        },
	        error: function(data) {
	            alert("error:"+data.responseText);
	         }
	  		});
	    //停止刷新
	    stopRefresh()
	}
	
	//关闭窗口
	function closeWin(){
		 $('#showWin').window('close');
		 startRefresh();
	}
	           
	           
	           
	function getCenterFieldHTML(rec,topField,belowField){
		var topHTML='';  
		var belowHTML='';  
		var topFieldValue=rec[topField];
		var belowFieldValue=rec[belowField];
		topHTML= '<span class="t-span">'+topFieldValue+'</span>';
		belowHTML= '<span class="t-span">'+belowFieldValue+'</span>';
		
	    return '<div style="text-align:center">'+topHTML+'</div><div style="text-align:center">'+belowHTML+'</div>'
	}           
	           
	           
	function getFieldHTML(rec,topField,belowField,belowFieldExtend){
		var topHTML='';  
		var belowHTML='';  
		var topFieldValue=rec[topField];
		var belowFieldValue=rec[belowField];
		
		topHTML= '<span class="t-span">'+topFieldValue+'</span>';
		if((topField=='sumFl'||topField=='daySumFl') && parseFloat(topFieldValue)>0 ){
			topHTML= '<span class="pos-span">'+topFieldValue+'</span>';
		}else if((topField=='sumFl'||topField=='daySumFl') && parseFloat(topFieldValue)<0 ){
			topHTML= '<span class="nag-span">'+topFieldValue+'</span>';
		}
		
	   
	    if(parseFloat(belowFieldValue)>parseFloat(topFieldValue)){
	    	belowHTML= '<span class="pos-span">'+belowFieldValue+belowFieldExtend+'</span>'	;	        		 
    	 }else{
    		belowHTML= '<span class="nag-span">'+belowFieldValue+belowFieldExtend+'</span>';
    	 }
	    
	    if(belowField=='dayFlPercent'&& parseFloat(belowFieldValue)>0){
	    	belowHTML= '<span class="pos-span">'+belowFieldValue+belowFieldExtend+'</span>'	;	
	    }else{
    		belowHTML= '<span class="nag-span">'+belowFieldValue+belowFieldExtend+'</span>';
	    }
	    
	    
	    return '<div style="text-align:right">'+topHTML+'</div><div style="text-align:right">'+belowHTML+'</div>'
	}
	
	$('#dgTable').datagrid({  
		url:ctx+'/stock/list',
		method:'post',
	    queryParams: {
		},
		fit:true,
		pageSize: 10,
		scrollbarSize:0,
		fitColumns:true,
		striped: true,
		singleSelect:true,
		pagination: false,  
		rownumbers: false,  
		columns:[[
		          {field:'id',title: '栏目',align: 'center',width: 58,hidden:true},
		          {field:'code',title: '<div>代码</div><div>名称</div>',align: 'center',width: 80,formatter:function(val,rec){
		        	   return getCenterFieldHTML(rec,'code','name','');
			       }} , 
			       /*{field:'startPrice',title: '昨收/今开',align: 'center',width: 80,formatter:function(val,rec){
		        	   return getFieldHTML(rec,'yesterdayPrice','startPrice','');
			       }} , 
			        {field:'miniPrice',title: '最低/最高',align: 'center',width: 80,formatter:function(val,rec){
		        	  return getFieldHTML(rec,'miniPrice','maxiPrice','');
			       }} , 
			      {field:'currentFiveDayPrice',title: '<div>5日线</div><div>明天5日线</div>',align: 'center',width: 60,formatter:function(val,rec){
			    	   return getFieldHTML(rec,'currentFiveDayPrice','tomorrowFiveDayPrice','');
			       }} , */  
		          {field:'buyCount',title: '数量',align: 'center',width: 40}, 
				  {field:'daySumFl',title: '当日盈亏',align: 'center',width: 80,formatter:function(val,rec){
		        	  return getFieldHTML(rec,'daySumFl','dayFlPercent','%');
				  }} ,
		          {field:'buyPrice',title: '<div>买入价</div><div>现价</div>',align: 'center',width: 80,formatter:function(val,rec){
		        	  return getFieldHTML(rec,'buyPrice','currentPrice','');
				  }} ,
		          {field:'flPercent',title: '浮动盈亏',align: 'center',width: 80,formatter:function(val,rec){
		        	  return getFieldHTML(rec,'sumFl','flPercent','%');
				  }}, 
				  {field:'currentFiveDayPrice',title: '详情',align: 'center',width: 60,formatter:function(val,rec){
			        	return "<a title='查看' href='javascript:void(0)' onclick=showFiveLineWin('"+rec.id+"')>查看</a>";

		          }}
		]]
		,toolbar:$('#tb')
	  });
	 //每隔10秒刷新一次
	 var refreshEvent;
	 var timer_is_on = 0;
	 function refreshPage(){
		 refreshEvent= setTimeout(function(){location.reload()},10000); 
	 }
	 //开始刷新页面
	 function startRefresh(){
		 if (!timer_is_on) {
		      timer_is_on = 1;
		        refreshPage();
		  }
	 }
	 
	 //停止刷新页面
	 function stopRefresh(){
		 clearTimeout(refreshEvent);
		 timer_is_on = 0;
	 }
	 
	 //默认开启
	 startRefresh();
	
//]]>
</script>
	
	
</body>
</html>